<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击出现爱心</title>
    <style>
        .heart {
            width: 10px;
            height: 10px;
            position: fixed;
            background: #f00;
            transform: rotate(45deg);
        }

        .heart::after,
        .heart::before {
            content: '';
            width: inherit;
            height: inherit;
            background: inherit;
            border-radius: 50%;
            position: absolute;
        }

        .heart::after {
            top: -5px;
        }

        .heart::before {
            left: -5px;
        }
    </style>
</head>

<body>
    <script>
        const hearts = [];

        // 创建爱心元素并添加到页面
        function createHeart(event) {
            const heart = document.createElement('div');
            heart.classList.add('heart');
            heart.style.left = `${event.clientX - 5}px`;
            heart.style.top = `${event.clientY - 5}px`;
            heart.style.backgroundColor = getRandomColor();
            document.body.appendChild(heart);

            hearts.push({
                el: heart,
                x: event.clientX - 5,
                y: event.clientY - 5,
                scale: 1,
                alpha: 1,
                color: heart.style.backgroundColor
            });
        }

        // 更新爱心状态
        function updateHearts() {
            for (let i = hearts.length - 1; i >= 0; i--) {
                const heart = hearts[i];
                if (heart.alpha <= 0) {
                    document.body.removeChild(heart.el);
                    hearts.splice(i, 1);
                    continue;
                }
                heart.y--;
                heart.scale += 0.004;
                heart.alpha -= 0.013;
                heart.el.style.cssText = `left: ${heart.x}px; top: ${heart.y}px; opacity: ${heart.alpha}; transform: scale(${heart.scale}, ${heart.scale}) rotate(45deg); background: ${heart.color};`;
            }
            requestAnimationFrame(updateHearts);
        }

        // 生成随机颜色
        function getRandomColor() {
            const r = Math.floor(Math.random() * 256);
            const g = Math.floor(Math.random() * 256);
            const b = Math.floor(Math.random() * 256);
            return `rgb(${r}, ${g}, ${b})`;
        }

        // 监听点击事件
        window.addEventListener('click', createHeart);

        // 开始更新循环
        requestAnimationFrame(updateHearts);
    </script>
</body>

</html>